<template>
    <view class="bottom">
        <Header></Header>
        <view class="back">
            <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                    name="arrow-left" color="#00eaff" @click="back"></u-icon>
            <text style="color: #00eaff;padding-right: 30rpx">Feedback</text>
        </view>
        <view class="content">
            <view class="type">
                <uni-data-select
                    v-model="value"
                    :localdata="range"
                    @change="changeSelect"
                    :clear="false"
                    class="select"
                ></uni-data-select>
            </view>
            <u-input v-model="content" type="textarea" :border="true" maxlength="50" class="input" placeholder="Please input feedback content"/>
            <u-upload :action="action" :file-list="images" max-count="3" :header="headers" class="upload" upload-text="upload"
                      @on-remove="remove" @on-success="success">
            </u-upload>
            <view class="button">
                <u-button class="custom-style" @click="submit" hover-class="none">
                    submit
                </u-button>
            </view>
        </view>
        <u-toast ref="uToast"/>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";

export default {
    name: 'feedBack',
    components: {
        CustomTabbar,
        Header
    },
    data() {
        return {
            value: 1,
            range: [
                {value: 1, text: "Product issues"},
                {value: 2, text: "Account issue"},
                {value: 3, text: "Other issues"},
            ],
            content: '',
            images: [],
            list: [],
            action: 'http://118.122.224.27:65129/api/common/upload',
            headers: {
                token: uni.getStorageSync('token')
            }
        };
    },
    methods: {
        // 返回
        back() {
            this.$u.route('/pages/my/my');
        },
        // 选择
        changeSelect(e) {
            this.value = e;
        },
        // 删除
        remove(index) {
            this.list.splice(index, 1);
        },
        // 成功
        success(index) {
            if (index.code === 1) {
                this.list.push(index.data.url);
            } else {
                this.$refs.uToast.show({
                    title: index.msg,
                    type: 'error'
                });
            }
        },
        // 提交
        submit() {
            if (this.content === '') {
                this.$u.toast('Please enter the content you want to provide feedback on');
                return
            }
            let images = ''
            if (this.list.length > 0) {
                images = this.list.join(',');
            }
            this.$u.api.subAdvise({
                type: this.value,
                content: this.content,
                images: images
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success',
                        url: '/pages/my/my'
                    });
                } else {
                    this.$refs.uToast.show({
                        title: index.msg,
                        type: 'error'
                    });
                }
            })

        }
    },
}
</script>

<style lang="scss" scoped>
.back {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}

.content {
    padding: 20rpx 30rpx;

    .type {
        display: flex;

        align-items: center;

        .select {

            ::v-deep .uni-select {
                border-radius: 30rpx;
            }

            ::v-deep.uni-select__input-text {
                color: #ffffff;
            }

            ::v-deep.uni-select__selector {
                color: #ffffff;
                background-color: #0f0e2d;
            }

            ::v-deep .uni-select__selector-item:hover {
                background-color: transparent;
                color: #00eaff;
            }

            ::v-deep .uni-select__selector {
                z-index: 1000;
            }
        }
    }

    .input {
        margin-top: 20rpx;
        background-color: #0f0e2d;

        ::v-deep .u-input__input {
            color: #ffffff
        }
    }

    .upload {
        margin-top: 20rpx;
        background-color: #0f0e2d;

        ::v-deep .u-list-item {
            background-color: #0f0e2d;
            border: 1px #ffffff solid;
        }
    }

    .button {
        margin-top: 20rpx;
    }
}

.button {
    padding-top: 30rpx;

    .custom-style {
        width: 100%;
        color: #ffffff;
        background-color: #708fff;
        //background: linear-gradient(to right, #c70e97, #2c05cf);
    }

}

::v-deep .u-type-success {
    background-color: #0f0e2d;
    border: none;
}

::v-deep .u-type-error {
    background-color: #0f0e2d;
    border: none;
}
</style>
